import Taro, {
  Component
} from '@tarojs/taro'
import {
  View,
  Text
} from '@tarojs/components'
import './cart.css'
import {
  AtNavBar
} from 'taro-ui'

export default class Cart extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: {}
    }
  }
  config = {
    navigationBarTitleText: '购物车'
  }

  // 页面被载入
  componentWillMount() {
    this.render();
  }

  // 页面渲染完成 
  componentDidMount() {}

  // 页面展示出来 
  componentDidShow() {}

  // 页面被隐藏 
  componentDidHide() {}

  render() {
      return (
          <View className='index'>
        <AtNavBar
          onClickRgIconSt={this.handleClick}
          onClickRgIconNd={this.handleClick}
          onClickLeftIcon={this.handleClick}
          color='#000'
          title='购物车'
          leftIconType='chevron-left'
          rightFirstIconType='trash'
          fixed='true'
        /> 

        <View className='at-row at-row--wrap nav-bar-btm' >
          <View className='at-col at-col-8' >
            <View className='at-row at-row--wrap'>
              <View className='at-col at-col-12 cart-total'>合计：<Text className='total'>￥56.00</Text></View>
              <View className='at-col at-col-12 cart-total-txt'>共2种3件商品</View>
            </View>
          </View>
          <View className='at-col at-col-4 place-btn'>下单</View> 
        </View> 
        <View className = 'cart-list at-row at-row--wrap' >
          <View className='cart-detail at-col at-col-12'>
            <View className='at-row cart-detail-first'>
              <View className='at-col at-col-4'>
                <View className='cart-img'></View>
              </View>
              <View className='at-col at-col-8'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12'>
                    <Text className='cart-name'>加州野火 坚果炒货</Text>
                  </View>
                  <View className='at-col at-col-12'>
                    <Text className='cart-number'>X3</Text>
                  </View>
                </View>
              </View>
            </View>
            <View className='at-row at-row--wrap cart-detail-second'>
              <View className='at-col at-col-6'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12 cart-norms'>大小：300g，口味：咸味</View>
                  <View className='at-col at-col-12 cart-no'>props3425567457</View>
                  <View className='at-col at-col-12 cart-price'>￥29.00/袋</View>
                </View>
              </View>
              <View className='at-col at-col-6'>
                按钮
              </View>
            </View>
          </View> 
          <View className = 'cart-detail at-col at-col-12' >
            <View className='at-row cart-detail-first'>
              <View className='at-col at-col-4'>
                <View className='cart-img'></View>
              </View>
              <View className='at-col at-col-8'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12'>
                    <Text className='cart-name'>加州野火 坚果炒货</Text>
                  </View>
                  <View className='at-col at-col-12'>
                    <Text className='cart-number'>X3</Text>
                  </View>
                </View>
              </View>
            </View> 
            <View className = 'at-row at-row--wrap cart-detail-second' >
              <View className='at-col at-col-6'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12 cart-norms'>大小：300g，口味：咸味</View>
                  <View className='at-col at-col-12 cart-no'>props3425567457</View>
                  <View className='at-col at-col-12 cart-price'>￥29.00/袋</View>
                </View>
              </View> <
      View className = 'at-col at-col-6' >
      按钮 <
      /View> < /
      View > <
      /View>

      <
      View className = 'cart-detail at-col at-col-12' >
      <View className='at-row cart-detail-first'>
              <View className='at-col at-col-4'>
                <View className='cart-img'></View>
              </View>
              <View className='at-col at-col-8'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12'>
                    <Text className='cart-name'>加州野火 坚果炒货</Text>
                  </View>
                  <View className='at-col at-col-12'>
                    <Text className='cart-number'>X3</Text>
                  </View>
                </View>
              </View>
            </View> <
      View className = 'at-row at-row--wrap cart-detail-second' >
      <View className='at-col at-col-6'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12 cart-norms'>大小：300g，口味：咸味</View>
                  <View className='at-col at-col-12 cart-no'>props3425567457</View>
                  <View className='at-col at-col-12 cart-price'>￥29.00/袋</View>
                </View>
              </View> <
      View className = 'at-col at-col-6' >
      按钮 <
      /View> < /
      View > <
      /View>

      <
      View className = 'cart-detail at-col at-col-12' >
      <View className='at-row cart-detail-first'>
              <View className='at-col at-col-4'>
                <View className='cart-img'></View>
              </View>
              <View className='at-col at-col-8'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12'>
                    <Text className='cart-name'>加州野火 坚果炒货</Text>
                  </View>
                  <View className='at-col at-col-12'>
                    <Text className='cart-number'>X3</Text>
                  </View>
                </View>
              </View>
            </View> <
      View className = 'at-row at-row--wrap cart-detail-second' >
      <View className='at-col at-col-6'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12 cart-norms'>大小：300g，口味：咸味</View>
                  <View className='at-col at-col-12 cart-no'>props3425567457</View>
                  <View className='at-col at-col-12 cart-price'>￥29.00/袋</View>
                </View>
              </View> <
      View className = 'at-col at-col-6' >
      按钮 <
      /View> < /
      View > <
      /View>

      <
      View className = 'cart-detail at-col at-col-12' >
      <View className='at-row cart-detail-first'>
              <View className='at-col at-col-4'>
                <View className='cart-img'></View>
              </View>
              <View className='at-col at-col-8'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12'>
                    <Text className='cart-name'>加州野火 坚果炒货</Text>
                  </View>
                  <View className='at-col at-col-12'>
                    <Text className='cart-number'>X3</Text>
                  </View>
                </View>
              </View>
            </View> <
      View className = 'at-row at-row--wrap cart-detail-second' >
      <View className='at-col at-col-6'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12 cart-norms'>大小：300g，口味：咸味</View>
                  <View className='at-col at-col-12 cart-no'>props3425567457</View>
                  <View className='at-col at-col-12 cart-price'>￥29.00/袋</View>
                </View>
              </View> <
      View className = 'at-col at-col-6' >
      按钮 <
      /View> < /
      View > <
      /View>

      <
      View className = 'cart-detail at-col at-col-12' >
      <View className='at-row cart-detail-first'>
              <View className='at-col at-col-4'>
                <View className='cart-img'></View>
              </View>
              <View className='at-col at-col-8'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12'>
                    <Text className='cart-name'>加州野火 坚果炒货</Text>
                  </View>
                  <View className='at-col at-col-12'>
                    <Text className='cart-number'>X3</Text>
                  </View>
                </View>
              </View>
            </View> <
      View className = 'at-row at-row--wrap cart-detail-second' >
      <View className='at-col at-col-6'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12 cart-norms'>大小：300g，口味：咸味</View>
                  <View className='at-col at-col-12 cart-no'>props3425567457</View>
                  <View className='at-col at-col-12 cart-price'>￥29.00/袋</View>
                </View>
              </View> <
      View className = 'at-col at-col-6' >
      按钮 <
      /View> < /
      View > <
      /View>

      <
      View className = 'cart-detail at-col at-col-12' >
      <View className='at-row cart-detail-first'>
              <View className='at-col at-col-4'>
                <View className='cart-img'></View>
              </View>
              <View className='at-col at-col-8'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12'>
                    <Text className='cart-name'>加州野火 坚果炒货</Text>
                  </View>
                  <View className='at-col at-col-12'>
                    <Text className='cart-number'>X3</Text>
                  </View>
                </View>
              </View>
            </View> <
      View className = 'at-row at-row--wrap cart-detail-second' >
      <View className='at-col at-col-6'>
                <View className='at-row at-row--wrap'>
                  <View className='at-col at-col-12 cart-norms'>大小：300g，口味：咸味</View>
                  <View className='at-col at-col-12 cart-no'>props3425567457</View>
                  <View className='at-col at-col-12 cart-price'>￥29.00/袋</View>
                </View>
              </View> <
      View className = 'at-col at-col-6' >
      按钮 <
      /View> < /
      View > <
      /View>

      <
      /View> < /
      View >
    )
  }
}